<template>
  <div class="editUser">
    <h4>用户管理/新增用户管理</h4>

    <!--表单  -->
    <el-form
      :model="param"
      :rules="rules"
      ref="param"
      label-width="100px"
      class="param"
    >
      <el-form-item label="登录名" prop="nickName">
        <el-input v-model="param.nickName"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="userName">
        <el-input v-model="param.userName"></el-input>
      </el-form-item>

      <template>
        <div class="role">
          <span>角色 ：</span>
          <el-radio v-model="radio" :label="false">总编辑</el-radio>
          <el-radio v-model="radio" :label="true">分公司编辑</el-radio>
        </div>
      </template>

      <el-form-item v-show="radio" label="所属企业" prop="location">
        <el-select v-model="param.branchId" placeholder="请选择分公司">
          <el-option
            :label="item.location"
            :value="item.branchId"
            v-for="(item, index) in select"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button @click="resetForm('param')">取消</el-button>
        <el-button type="primary" @click="submitForm('param')">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 单选按钮
      radio: false,
      select: '',
      value: '',
      rules: {
        nickName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ],
        userName: [
          { required: true, message: '请输入名字', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ]
        // location: [
        //   { required: true, message: '请选择分公司', trigger: 'change' }
        // ]
      },
      param: {
        nickName: '',
        usersName: '',
        roleId: '',
        branchId: ''
      }
    }
  },
  mounted () {
    this.selectCompanys()
  },
  methods: {
    async selectCompanys () {
      const res = await this.$http.selectCompany()
      console.log(res.data.data)
      this.select = res.data.data
    },
    // 保存  取消
    submitForm (formName) {
      this.$refs[formName].validate(async (valid) => {
        console.log(valid)
        if (valid) {
          if (this.radio) {
            this.param.roleId = 2
          } else {
            this.param.roleId = 1
          }
          console.log(this.param)
          // const params = this.$qs.stringify(this.param)
          const params = JSON.stringify(this.param)
          const data = await this.$http.addUser(params)
          // 跳转页面
          this.$router.push({
            path: './backgroundUser'
          })
          console.log(data)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.$router.push({
        path: './backgroundUser'
      })
    }
  }
}
</script>

<style lang="less" scoped>
.editUser {
  h4 {
    padding-left: 80px;
    height: 63px;
    line-height: 63px;
  }
  .param {
    padding-left: 158px;
    color: #606266;
    .el-input {
      width: 500px;
    }
    .role {
      padding-left: 50px;
      padding-bottom: 30px;
      span {
        font-size: 14px;
      }
    }
    .select {
      display: none;
    }
  }
}
</style>
